<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rebeccapurple;
    }

    div>span {
      font: 700 normal 5rem "微软雅黑";
      color: green;
      position: relative;
      display: inline-block;
    }

    .color {
      animation-name: color;
      animation-duration: 1s;
      animation-iteration-count: 2;
      animation-timing-function: linear;
      animation-direction: alternate;
    }

    @keyframes color {
      0% {
        color: coral;
        transform: scale(2);
      }

      100% {
        color: tomato;
        transform: scale(.5);
      }
    }
  </style>
</head>

<body>
  <div>
    https:www.baidu.com
  </div>
</body>
<script>
  const div = document.querySelector("div");
  [...div.innerText].reduce((pre, value, index, arrary) => {
    pre == index && (div.innerHTML = ""); //如果pre==index,则让div清空.利用短路逻辑 
    let span = document.createElement("span");
    span.innerHTML = value;
    div.appendChild(span);
    span.addEventListener("mouseleave", (e) => {
      e.currentTarget.classList.add("color");
    });

    span.addEventListener("animationend", (e) => { //监听动画结束后，将类名除去
      e.currentTarget.classList.remove("color");
    });
  }, 0);
</script>

</html>